<template>
    <div class="com__box">
        <div class="loading" :style="{ width: size, height: size, color }">
            <div :style="{ borderWidth }"></div>
            <div :style="{ borderWidth }"></div>
            <div :style="{ borderWidth }"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
    defineProps<{
        size?: string
        borderWidth?: string
        color?: string
    }>()
</script>

<style lang="scss" scoped>
    .loading,
    .loading > div {
        position: relative;
        box-sizing: border-box;
    }

    .loading {
        display: block;
        font-size: 0;
        color: #000;
    }

    .loading > div {
        display: inline-block;
        float: none;
        background-color: currentColor;
        border: 0 solid currentColor;
    }

    .loading {
        width: 2rem;
        height: 2rem;
    }

    .loading > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        border-width: 0.1rem;
        border-radius: 100%;
        opacity: 0;
        animation: ball-scale-ripple-multiple 1.25s 0s infinite
            cubic-bezier(0.21, 0.53, 0.56, 0.8);
    }

    .loading > div:nth-child(1) {
        animation-delay: 0s;
    }

    .loading > div:nth-child(2) {
        animation-delay: 0.25s;
    }

    .loading > div:nth-child(3) {
        animation-delay: 0.5s;
    }

    @keyframes ball-scale-ripple-multiple {
        0% {
            opacity: 1;
            transform: scale(0.1);
        }

        70% {
            opacity: 0.5;
            transform: scale(1);
        }

        95% {
            opacity: 0;
        }
    }
</style>
